import React from 'react';
import { createBrowserRouter, Navigate } from 'react-router-dom';
// import Bpp from "../views/Bpp/Bpp"
// import Login from "../views/Login/Login"
// import Home from "../views/Home/Home"
// import Classify from "../views/Classify/Classify"
// import Shop from "../views/Shop/Shop"
// import My from "../views/My/My"
// import Order from "../views/Order/Order"
// import Product from "../views/Product/Product"
// import Detail from "../views/Detail/Detail"

const Bpp = React.lazy(()=>import("../views/Bpp/Bpp"))
const Login = React.lazy(()=>import("../views/Login/Login"))
const Home = React.lazy(()=>import("../views/Home/Home"))
const Classify = React.lazy(()=>import("../views/Classify/Classify"))
const Shop = React.lazy(()=>import("../views/Shop/Shop"))
const My = React.lazy(()=>import("../views/My/My"))
const Order = React.lazy(()=>import("../views/Order/Order"))
const Product = React.lazy(()=>import("../views/Product/Product"))
const Details = React.lazy(()=>import("../views/Details/Details"))

const AuthComponent = props =>{
    const Com = props.children.type
    if(sessionStorage.getItem("accesstoken")){
        return <Com></Com>
    }else{
        return <Navigate to="/login"></Navigate>
    }
}

const router = createBrowserRouter([
    {
       path:"/login",
       element:<Login></Login> 
    },
    {
        path:"/bpp",
        element:<AuthComponent><Bpp></Bpp></AuthComponent>,
        children:[
            {
                path:"/bpp/home",
                element:<Home></Home>
            },
            {
                path:"/bpp/classify",
                element:<Classify></Classify>
            },
            {
                path:"/bpp/shop",
                element:<Shop></Shop>
            },
            {
                path:"/bpp/my",
                element:<My></My>,
            },
            {
                path:"/bpp",
                element:<Navigate to="/bpp/home"></Navigate>
            }
        ]
    },
    
    {
        path:"/order",
        element:<Order></Order>
    },
    {
        path:"/product",
        element:<Product></Product>,
    },
    {
        path:"/detail",
        element:<Details></Details>
    },
    {
        path:"/",
        element:<Navigate to="/bpp"></Navigate>
    }
])

export default router